<script setup>
import {ref} from "vue";
import useUserInfoStore from "@/stores/userInfo";
import router from "@/router";
const userInfoStore = useUserInfoStore();
const userInfoData = ref({...userInfoStore.userInfo});

const rules={
  phonenumber:[
    {required:true,message:'请输入手机号',trigger:'blur'},
    { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur' }
  ],
  address:[
    {required:true,message:'请输入地址',trigger:'blur'},
    {min:3,max:20,message:'地址应为3-20位',trigger:'blur'}
  ]
}

import{userInfoUpdateService} from "@/api/user.js";
import {ElMessage} from "element-plus";
const updateUserInfo=async ()=>{
  let result=await userInfoUpdateService(userInfoData.value)
  ElMessage.success(result.msg?result.msg:"修改成功")
  userInfoStore.setUserInfo(userInfoData.value)
  router.push('/user/info')
}

</script>

<template>
  <el-container>
    <el-aside width="100%">
      <el-card >
        <template #header>
          <div><strong>基本信息修改</strong></div>
        </template>
          <el-form :model="userInfoData"  :rules="rules"   label-width="auto" size="large" style="max-width: 600px">
            <el-form-item label="手机号:" prop="phonenumber" >
              <el-input  v-model="userInfoData.phonenumber"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名:" prop="realname">
              <el-input v-model="userInfoData.realname" disabled></el-input>
            </el-form-item>
            <el-form-item label="地址:" prop="address">
              <el-input v-model="userInfoData.address"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:" prop="email">
              <el-input  v-model="userInfoData.email"></el-input>
            </el-form-item>
            <el-button class="button" type="primary" auto-insert-space  @click="updateUserInfo" >
              修改
            </el-button>

          </el-form>
      </el-card>
    </el-aside>
  </el-container>
</template>

<style scoped lang="scss">

</style>